// 文章详情页
import Link from 'next/link'

import Header from './api/Header'
import Footer from './api/Footer'

import { Breadcrumb, Row, Col, Affix } from 'antd'
import { HomeOutlined, StarOutlined, SmileOutlined, LikeOutlined, MessageOutlined, DashboardOutlined } from '@ant-design/icons';

import ReactMarkdown from 'react-markdown'
import MarkdownNavbar from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'

import '../styles/pages/details.scss'

function Details () {
  let markdown=
  '# p01:课程介绍和环境搭建\n' +
  '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
  '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n' +
   '**这是加粗的文字**\n\n' +
  '*这是倾斜的文字*`\n\n' +
  '***这是斜体加粗的文字***\n\n' +
  '~~这是加删除线的文字~~ \n\n'+
  '\`console.log(111)\` \n\n'+
  '# p02:来个Hello World 初始Vue3.0\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n'+
  '***\n\n\n' +
  '# p03:Vue3.0基础知识讲解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '# p04:Vue3.0基础知识讲解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '#5 p05:Vue3.0基础知识讲解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '# p06:Vue3.0基础知识讲解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '# p07:Vue3.0基础知识讲解\n' +
  '> aaaaaaaaa\n' +
  '>> bbbbbbbbb\n' +
  '>>> cccccccccc\n\n'+
  '``` var a = 11;```'

  return (
    <div className="details-content">
      {/* 头部 */}
      <Header />

      {/* 2列布局 */}
      <div className="body">
        {/* 标题 */}
        <div className="title bg-white ber-ras">
          <h2>笔记本外接显示器画面卡顿掉帧解决办法</h2>
          <div className="icon">
            <span>
              <SmileOutlined />
              穆土
            </span>
            <span>
              <DashboardOutlined />
              2021 / 3 / 2
            </span>
            <span>
              <StarOutlined />
              123
            </span>
            <span>
              <LikeOutlined />
              321
            </span>
            <span>
              <MessageOutlined />
              223
            </span>
          </div>
        </div>
        
        {/* 导航 */}
        <Breadcrumb className="bg-white ber-ras">
          <Breadcrumb.Item>
            <HomeOutlined />
            <span>
              <Link href="/">首页</Link>
            </span>
          </Breadcrumb.Item>
          <Breadcrumb.Item>文章</Breadcrumb.Item>
          <Breadcrumb.Item>当前位置</Breadcrumb.Item>
        </Breadcrumb>
        
        {/* 2列 */}
        <Row justify="space-between">
          {/* 左列 */}
          <Col className="bg-white ber-ras left" xs={24} md={24} lg={24} xl={17}>
            <ReactMarkdown
              source={markdown}
              escapeHtml={false} />
          </Col>
          {/* 右列 */}
          <Col xs={0} md={0} lg={0} xl={6} className="right">
            {/* 固钉-大纲 */}
            <Affix
              offsetTop={80}>
              <div className="bg-white ber-ras outline">
                <h3 className="ber-ras">大纲:</h3>
                <MarkdownNavbar
                  source={markdown}
                  ordered={false}
                  headingTopOffset={-200}
                />
              </div>
            </Affix>
          </Col>
        </Row>
      </div>

      {/* 尾款 */}
      <Footer />
    </div>
  )
}

export default Details
